<template>
  <view class="skeleton">
    <!-- 轮播图骨架 -->
    <view class="skeleton-swiper">
      <view class="skeleton-swiper-item"></view>
    </view>

    <!-- 分类骨架 -->
    <index-category></index-category>
    <!-- 天气骨架 -->
    <view class="skeleton-weather"></view>

    <!-- 推荐视图骨架 -->
    <view class="skeleton-views">
      <view class="skeleton-view-title"></view>
      <view class="skeleton-view-item"></view>
    </view>

    <!-- 游玩攻略骨架 -->
    <view class="skeleton-guide">
      <view class="skeleton-guide-title"></view>
      <view class="skeleton-guide-container">
        <view class="skeleton-guide-item" v-for="n in 2" :key="n"></view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  padding: 20rpx;
}

.skeleton-swiper,
.skeleton-swiper-item,
.skeleton-category-item,
.skeleton-weather,
.skeleton-view-item,
.skeleton-guide-item {
  background: linear-gradient(120deg, #e0e0e0 25%, #f7f7f7 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite ease-in-out;
}

.skeleton-swiper {
  height: 360rpx;
  margin-bottom: 20rpx;
}

.skeleton-swiper-item {
  height: 100%;
}

.skeleton-category {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
}

.skeleton-category-item {
  width: 130rpx;
  height: 130rpx;
  border-radius: 10rpx;
}

.skeleton-weather {
  width: 690rpx;
  height: 100rpx;
  margin: 0 auto 20rpx;
  border-radius: 80rpx;
}

.skeleton-views {
  padding-top: 30rpx;
  margin-left: 5rpx;
  margin-right: 5rpx;
}

.skeleton-view-title {
  height: 36rpx;
  width: 100%;
  background-color: #f3f4f6;
  margin: 0 auto 10rpx;
  border-radius: 10rpx;
  text-align: center;
  line-height: 36rpx;
}

.skeleton-view-item {
  min-width: 430rpx;
  height: 430rpx;
  border-radius: 10rpx;
  margin-right: 15rpx;
  display: inline-block;
}

.skeleton-guide {
  padding-top: 30rpx;
  background-color: #f3f4f6;
  border-radius: 8px;
}

.skeleton-guide-title {
  height: 36rpx;
  width: 100%;
  background-color: #f3f4f6;
  margin: 0 auto 10rpx;
  border-radius: 10rpx;
  text-align: center;
  line-height: 36rpx;
}

.skeleton-guide-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15rpx;
}

.skeleton-guide-item {
  width: 100%;
  height: 400rpx;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
}
</style>
<script setup>
import IndexCategory from '@/pages/index/components/IndexCategory.vue'
</script>
